<template>
  <section class="popover-wrapper" ref='popRef'>
    <el-popover
      ref="popover4"
      placement="bottom"
      v-model='popVisible'
      popper-class="nb-popover"
      trigger="hover">
      <div
        class="popover-content"
        v-if="row.headerType === 'input'"
      >
        <el-form :inline='true'>
          <se-form
            placeholder="搜索关键字"
            v-model='value'
          ></se-form>
        </el-form>
        <div class="button-wrapper">
          <el-button size='mini' type='primary' @click='confirm("")'>确定</el-button>
          <el-button size='mini' @click='popVisible = false'>取消</el-button>
        </div>
      </div>
      <div
        class="popover-content padding"
        v-if="row.headerType === 'sort'"
      >
        <div class="sort-item up-item" @click="sortClick(1)">
          <nb-img width="15" url="../../src/assets/image/sortup.png"></nb-img><span>升序</span>
        </div>
        <div class="sort-item down-item" @click="sortClick(2)">
          <nb-img width="15" url="../../src/assets/image/sortdown.png"></nb-img><span>降序</span>
        </div>
      </div>
      <div
        class="popover-content select-content"
        v-if="row.headerType === 'select'"
      >
        <div class="sort-item select-item up-item" v-for="item in row.options" :key='item.value' @click="confirmSelect(item)">{{item.label}}</div>
      </div>
      <div
        class="popover-content "
        v-if="row.headerType === 'date'"
      >
        <vue-datepicker-local
          v-model="time"
          type="inline"
        ></vue-datepicker-local>
        <div class="button-wrapper">
          <el-button size='mini' type='primary' @click='confirmDate("")'>确定</el-button>
          <el-button size='mini' @click='popVisible = false'>取消</el-button>
        </div>
      </div>
      <div
        class="popover-content "
        v-if="row.headerType === 'daterange'"
      >
        <div class="date-wrapper">
          <div class="date-box">
            <div class="date-title">开始时间<span>结束时间</span></div>
            <vue-datepicker-local
              v-model="start"
              type="inline"
              class='date-item date-item1'
            ></vue-datepicker-local>
          </div>
          <!--<div class="date-box">-->
            <!--<div class="date-title date-title2">结束时间</div>-->
            <!--<vue-datepicker-local-->
              <!--v-model="end"-->
              <!--type="inline"-->
              <!--class='date-item date-item2'-->
            <!--&gt;</vue-datepicker-local>-->
          <!--</div>-->
        </div>
        <div class="button-wrapper">
          <el-button size='mini' type='primary' @click='confirmDateRange()'>确定</el-button>
          <el-button size='mini' @click='popVisible = false'>取消</el-button>
        </div>
      </div>
      <div
        class="popover-content range-content"
        v-if="row.headerType === 'daterangesort'"
      >
        <div class="sort-item up-item" @click="sortClick(1)">
                    <nb-img width="15" url="../../src/assets/image/sortup.png"></nb-img><span>升序</span>
        </div>
        <div class="sort-item down-item" @click="sortClick(2)">
                    <nb-img width="15" url="../../src/assets/image/sortdown.png"></nb-img><span>降序</span>
        </div>
        <div class="range-split"></div>
        <div class="date-wrapper">
          <div class="date-box">
            <div class="date-title">开始时间<span>结束时间</span></div>
            <vue-datepicker-local
              v-model="start"
              type="inline"
              class='date-item date-item1'
            ></vue-datepicker-local>
          </div>
          <!--<div class="date-box">-->
            <!--<div class="date-title date-title2">结束时间</div>-->
            <!--<vue-datepicker-local-->
              <!--v-model="end"-->
              <!--type="inline"-->
              <!--class='date-item date-item2'-->
            <!--&gt;</vue-datepicker-local>-->
          <!--</div>-->
        </div>
        <div class="button-wrapper">
          <el-button size='mini' type='primary' @click='confirmDateRange()'>确定</el-button>
          <el-button size='mini' @click='popVisible = false'>取消</el-button>
        </div>
      </div>
      <div
        class="popover-content range-content"
        v-if="row.headerType === 'range'"
      >
        <div class="sort-item up-item" @click="sortClick(1)">
                    <nb-img width="15" url="../../src/assets/image/sortup.png"></nb-img><span>升序</span>

        </div>
        <div class="sort-item down-item" @click="sortClick(2)">
                    <nb-img width="15" url="../../src/assets/image/sortdown.png"></nb-img><span>降序</span>

        </div>
        <div class="range-split"></div>
        <div class="input-content">
          <el-input v-model='range1' placeholder="搜索区间"></el-input>
          <div class="input-hr">-</div>
          <el-input v-model='range2' placeholder="搜索区间"></el-input>
        </div>
        <div class="button-wrapper">
          <el-button size='mini' type='primary' @click='confirmRange("")'>确定</el-button>
          <el-button size='mini' @click='popVisible = false'>取消</el-button>
        </div>
      </div>
      <div
        class="popover-content range-content"
        v-if="row.headerType === 'datesort'"
      >
        <div class="sort-item up-item" @click="sortClick(1)">
                    <nb-img width="15" url="../../src/assets/image/sortup.png"></nb-img><span>升序</span>
        </div>
        <div class="sort-item down-item" @click="sortClick(2)">
                    <nb-img width="15" url="../../src/assets/image/sortdown.png"></nb-img><span>降序</span>
        </div>
        <div class="range-split"></div>
        <vue-datepicker-local
          v-model="time"
          type="inline"
          format="YYYY-MM"
          class='date-item date-item2'
        ></vue-datepicker-local>
        <div class="button-wrapper">
          <el-button size='mini' type='primary' @click='confirmDate("")'>确定</el-button>
          <el-button size='mini' @click='popVisible = false'>取消</el-button>
        </div>
      </div>
      <!-- 一列多个搜索 -->
      <div
        class="popover-content range-content more-search-div"
        v-if="row.headerType === 'moreSearch'"
      >
        <div
          class="popover-content range-content more-search-label"
        >
          <div class="sort-item up-item" @click="openSelect(1)">产品类型</div>
          <div class="sort-item down-item" @click="openDate(2)">保单受理日期</div>
          <div class="sort-item down-item" @click="openDate(3)">保单承保日期</div>
          <div class="sort-item down-item" @click="openDate(4)">回执签署日期</div>
          <div class="sort-item down-item" @click="openDate(5)">排序</div>
        </div>
        <div
          class="popover-content select-content"
          v-if="moreSearch === 1"
        >
          <div class="sort-item up-item" v-for="item in row.options" :key='item.value' @click="confirmSelect(item)">{{item.label}}</div>
        </div>
        <div
          class="popover-content "
          v-if="moreSearch === 2 || moreSearch === 3 ||moreSearch === 4"
        >
          <div class="date-wrapper">
            <div class="date-box">
              <div class="date-title">开始时间<span>结束时间</span></div>
              <vue-datepicker-local
                v-model="start"
                type="inline"
                class='date-item date-item1'
              ></vue-datepicker-local>
            </div>
            <!--<div class="date-box">-->
              <!--<div class="date-title date-title2">结束时间</div>-->
              <!--<vue-datepicker-local-->
                <!--v-model="end"-->
                <!--type="inline"-->
                <!--class='date-item date-item2'-->
              <!--&gt;</vue-datepicker-local>-->
            <!--</div>-->
          </div>
          <div class="button-wrapper">
            <el-button size='mini' type='primary' @click='confirmDateRange()'>确定</el-button>
            <el-button size='mini' @click='popVisible = false'>取消</el-button>
          </div>
        </div>
        <div
          class="popover-content"
          v-if="moreSearch === 5"
        >
          <div class="sort-item up-item" @click="sortClick(1)">
                      <nb-img width="15" url="../../src/assets/image/sortup.png"></nb-img><span>升序</span>
          </div>
          <div class="sort-item down-item" @click="sortClick(2)">
                      <nb-img width="15" url="../../src/assets/image/sortdown.png"></nb-img><span>降序</span>
          </div>
        </div>
      </div>

      <div v-if="row.headerType === 'more'" class="popover-content more-content">
        <div class="more-left">
          <div class="sort-item" :class="{isSelect: isSelect === index}" v-for="(item, index) in row.more" :key="item.title" @click="selectMore(index)">
            {{item.title}}
          </div>
        </div>
        <div class="hover-content">
          <div v-for="(item, index) in row.more" :key="item.title">
            <template v-if="item.type === 'input' && isSelect === index">
              <el-form :inline='true'>
                <se-form
                  placeholder="搜索关键字"
                  v-model='value'
                ></se-form>
              </el-form>
              <div class="button-wrapper">
                <el-button size='mini' type='primary' @click='confirm(item)'>确定</el-button>
                <el-button size='mini' @click='popVisible = false'>取消</el-button>
              </div>
            </template>
            <template v-else-if="item.type === 'select' && isSelect === index">
              <div class="sort-item select-item up-item" v-for="items in item.options" :key='items.value' @click="confirmSelect(items, item)">{{items.label}}</div>
            </template>
            <template v-else-if="item.type === 'sort' && isSelect === index">
              <div class="sort-item up-item" @click="sortClick(1, item, row)">
                <nb-img width="15" url="../../src/assets/image/sortup.png"></nb-img><span>升序</span>
              </div>
              <div class="sort-item down-item" @click="sortClick(2, item, row)">
                <nb-img width="15" url="../../src/assets/image/sortdown.png"></nb-img><span>降序</span>
              </div>
            </template>
          </div>
        </div>
      </div>
    </el-popover>
    <div v-popover:popover4 class="popover-box">
      <nb-img url="../../src/assets/image/pulldown1.png"></nb-img>
    </div>
  </section>
</template>

<script>
  import {Popover} from 'element-ui'
  import SeForm from '@/components/se-form.vue'
  import VueDatepickerLocal from 'vue-datepicker-local'
  import {formatDate} from '@/common/utils'
  import {cloneDeep} from 'lodash'
  import NbImg from '@/components/nb-img'
  export default {
    name: 'NbPopover',
    data () {
      return {
        popVisible: false,
        value: '',
        row: {},
        time: new Date(),
        start: [new Date(), new Date()],
        end: new Date(),
        range1: '',
        range2: '',
        name: '',
        moreSearch: 0, // 兼容一列多个搜索
        target: null,
        targetP: null,
        isSelect: 0
      }
    },
    components: {
      ElPopover: Popover,
      SeForm: SeForm,
      VueDatepickerLocal,
      NbImg
    },
    methods: {
      confirm (item) {
        let _row = null
        if (this.row.headerType === 'more') {
          _row = {
            headerName: item.title,
            headerKey: item.key
          }
        }
        this.targetP && this.targetP.resetPagination && this.targetP.resetPagination()
        this.target.handleSearch(this.value.trim(), _row || this.row) // 直接触发父父父父级事件
        this.pop(this.value.trim(), _row || this.row)
      },
      confirmDate () {
        let date = formatDate(this.time, this.row.format || 'YYYY-MM-DD')
        this.target.handleSearch(date, this.row) // 直接触发父父父父级事件
        this.pop(date, this.row)
      },
      confirmDateRange () {
        let start = formatDate(this.start[0], 'YYYY-MM-DD')
        let end = formatDate(this.start[1], 'YYYY-MM-DD')
        if (this.row.headerType === 'moreSearch') { // 兼容一列多个搜索
          let rowCopy = cloneDeep(this.row)
          if (this.moreSearch === 2) { // 保单受理日期
            rowCopy.headerName = '保单受理日期'
            rowCopy.headerKey = 'acceptDate'
          } else if (this.moreSearch === 3) { // 保单承保日期
            rowCopy.headerName = '保单承保日期'
            rowCopy.headerKey = 'underwriteDate'
          } else if (this.moreSearch === 4) { // 回执签署日期
            rowCopy.headerName = '回执签署日期'
            rowCopy.headerKey = 'receiptDate'
          }
          this.target.handleSearch([start, end], rowCopy, 'moreSearch') // 直接触发父父父父级事件
          this.pop([start, end], rowCopy, 'moreSearch')
        } else {
          this.target.handleSearch([start, end], this.row, 'daterange') // 直接触发父父父父级事件
          this.pop([start, end], this.row, 'daterange')
        }
      },
      confirmRange () {
        let start = this.range1
        let end = this.range2
        this.target.handleSearch([start, end], this.row, 'range') // 直接触发父父父父级事件
        this.pop([start, end], this.row, 'range')
      },
      confirmSelect (item, row) {
        if (this.row.headerType === 'moreSearch') { // 兼容一列多个搜索项
          let rowCopy = cloneDeep(this.row)
          rowCopy.headerName = '产品类型'
          rowCopy.searchKey = 'type'
          this.target.handleSearch(item.value, rowCopy) // 直接触发父父父父级事件
          this.pop(item.label, rowCopy)
        } else {
          let _row = null
          if (this.row.headerType === 'more') {
            _row = {
              headerName: row.title,
              headerKey: row.key
            }
          }
          this.target.handleSearch(item.value, _row || this.row) // 直接触发父父父父级事件
          this.pop(item.label, _row || this.row)
        }
      },
      sortClick (value, row, rows) {
        let _row = null
        if (this.row.headerType === 'more') {
          _row = {
            headerName: rows.headerName,
            headerKey: row.key
          }
        }
        this.target.handleSearch(value, _row || this.row, 'sort') // 直接触发父父父父级事件
        this.pop(value, _row || this.row, 'sort')
      },
      pop (value, row, type) {
        this.$parent.$parent.$parent.handleSearchPop(value, row, type)
        this.popVisible = false
        this.$nextTick(() => {
          this.value = ''
          this.range1 = ''
          this.range2 = ''
          this.time = new Date()
        })
      },
      /* 打开多选 */
      openSelect () {
        this.moreSearch = 1
      },
      /* 打开日期选择 */
      openDate (num) {
        this.moreSearch = num
      },
      findTarget (t) {
        if (t.handleSearch) {
          this.target = t
        } else {
          this.findTarget(t.$parent)
        }
      },
      findPagination (t) {
        if (this.targetP) return
        t.$children.map(item => {
          if (item.resetPagination) {
            this.targetP = item
          } else if (!this.targetP) {
            this.findPagination(item)
          }
        })
      },
      selectMore (index) {
        this.isSelect = index
      }
    },
    mounted () {
      this.row = JSON.parse(this.$refs.popRef.attributes.data.value)
      this.findTarget(this.$parent.$parent.$parent)
      this.findPagination(this.target)
    }
  }
</script>

<style lang="scss">
  .popover-wrapper {
    display: inline-block;
    font-size: 0;
    line-height: normal !important;
    position: relative;
    top: 0px;
    .el-popover{
      padding: 0 !important;
    }
    .popover-box {
      display: inline-block;
      line-height: normal !important;
      cursor: pointer;
      position: relative;
      padding: 0 10px !important;
      .fa-chevron-circle-down {
        font-size: 16px;
        /*opacity: 0;*/
      }
    }
    .popover-box:hover {
      .fa-chevron-circle-down {
        opacity: 1;
      }
    }
  }
  .nb-popover {
    padding: 0 !important;
    .popover-content {
      .el-form {
        /*margin: 10px;*/
        .el-form-item {
          margin: 20px 15px;
          .el-form-item__content {
            padding: 0;
            position: static;
          }
        }
      }
      .button-wrapper {
        text-align: right;
        padding: 20px 15px;
        border-top: 1px solid #eee;
        font-size: 0;
        button{
          width: 58px;
          height: 28px;
          font-size: 14px;
          padding: 0;
        }
        .el-button--default{
          color: #b3b3b3;
          border: 1px solid #eee;
        }
      }
      .sort-item {
        padding: 6px 15px;
        cursor: pointer;
        display: flex;
        align-items: center;
        font-size: 14px;
        span{
          font-size: 14px;
        }
        .nb-img-wrapper{
          margin-right: 8px;
          position: relative;
          top: -1px;
        }
      }
      .sort-item:hover {
        background: #f3f3f4;
      }
      .datepicker-popup {
        box-shadow: none;
        border: none;
      }
      .date-wrapper {
        .date-box {
          display: inline-block;
          .date-title {
            padding-left: 10px;
            padding-top: 10px;
            font-size: 14px;
            span{
              padding-left: 150px;
            }
          }
          .date-title2 {
            padding-left: 5px;
          }
          .date-item {
            border: 1px solid #eee;
          }
          .date-item1 {
            margin: 6px 5px 10px 10px;
          }
          .date-item2 {
            margin: 6px 10px 10px 5px;
          }
        }
      }
    }
    .select-content {
      padding: 6px 0;
      max-height: 234px;
      overflow-y: auto;
      .select-item{
        padding: 10px 15px 11px;
      }
    }
    .padding{
      padding: 6px 0;
    }

    .range-content {
      .range-split {
        border-top: 1px solid #eee;
      }
      .input-content {
        height: 36px;
        width: 180px;
        line-height: 36px;
        border: 1px solid #d8dce5;
        border-radius: 4px;
        color: #5a5e66;
        -webkit-appearance: none;
        margin: 14px;
        display: flex;
        overflow: hidden;
        .el-input {
          .el-input__inner {
            margin: 0;
            height: 36px;
            border: none;
            padding: 0 5px;
          }
        }
        .input-hr {
          width: 15px;
          flex: 0 0 15px;
          text-align: center;
          color: #5a5e66;
        }
      }
    }
    .more-content{
      display: flex;
      .more-left{
        .sort-item{
          position: relative;
        }
        .sort-item.isSelect{
          background: #f3f3f4;
        }
      }
      .hover-content{
        background: white;
        border-left: 1px solid #eee;
        /*box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);*/
      }
    }
  }
    /* 一列多个搜索 */
  .more-search-div {
    display: flex;
    flex-wrap: nowrap;
    .more-search-label {
      margin-right: 10px;
    }
    .popover-content {
      .sort-item {
        white-space: nowrap;
      }
      .date-wrapper {
        white-space: nowrap;
      }
    }
  }
</style>
